<template>
  <div class="productModal" v-show="show">
    <div class="bg-layer"></div>
    <div class="modal-box">

      <!-- <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="originPrice" label="原价" align="center"></el-table-column>
        <el-table-column prop="presentPrice" label="现价" align="center"></el-table-column>
        <el-table-column prop="proportion" label="团长佣金占比%" align="center"></el-table-column>
      </el-table> -->

     
      <div class="title">
        <ul>
          <li>商品名称</li>
        </ul>
      </div>

      <div class="handle-box">
        <el-input v-model="name" placeholder="商品名称" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button type="primary" @click="reset">返回列表</el-button>
      </div>


      <div class="product-list">
        <ul v-for="(item,index) in list" :key="index" @click="item.selected=!item.selected">
          <li class="checkbox" v-show="item.selected==false"><i class="fa fa-square-o"></i></li>
          <li class="checkbox" v-show="item.selected==true"><i class="fa fa-check-square-o"></i></li>
          <li>{{item.name}}</li>
        </ul>
      </div>

      <div class="modal-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="select()">选 择</el-button>
      </div>

    </div>
  
  </div>
</template>

<script type="text/ecmascript-6">
const SUCCESS = 0;
export default {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      show: false,
      name: "",
      originList: []
    };
  },
  created() {},
  methods: {
    select() {
      let selectedList = [];
      this.list.forEach(item => {
        if (item.selected) {
          selectedList.push(item);
        }
      });
      if (selectedList.length <= 0) {
        this.$message({
          type: "warning",
          message: "请选择商品"
        });
        return;
      }
      this.$emit("select", selectedList);
    },
    search(){
      if(this.originList.length == 0){
        this.originList = this.list;
      }

      if(this.name == ""){
        return;
      }

      let searchList = [];
      this.list.forEach(item => {
        if(item.name.includes(this.name)){
          searchList.push(item)
        }
      });

      this.list = searchList;
    },
    reset(){
      this.list = this.originList;
    }
  }
};
</script>

<style lang="less">
.productModal {
  .modal-box {
    width: 50%;
    height: 600px;
    background: #fff;
    z-index: 1050;
    // text-align: center;
    border-radius: 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: auto;
    padding: 20px 40px;

    .handle-box {
      margin-top: 20px;
      .handle-input {
        // width: 350px;
        width: 40%;
        display: inline-block;
      }
    }

    .title {
      text-align: center;
      ul {
        li {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }

    .product-list {
      margin-top: 10px;
      ul {
        line-height: 60px;
        border-bottom: 1px solid #ebeef5;
        li {
          display: inline-block;
        }
        .checkbox {
          width: 5%;
          i {
            font-size: 20px;
            vertical-align: middle;
          }
        }

        &:hover {
          background: #f0f9eb;
        }
      }
    }

    .modal-footer {
      text-align: center;
      margin-top: 60px;
    }
  }
}
</style>
